<template>
    <div class="video-detail">
        <div class="head-box"> 
            <video id="myVideo" controls="true"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+prdList.audio" :poster="prdList.thumb?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+prdList.thumb:'https://rqys.hleason.com/dist/images/plh.png'"  @play="bindPlay"> 
                <cover-view class="cover-box" v-if="coverShow&&typeId==1" >
                    <cover-image  class="cover-box-img"  :src="prdList.thumb?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+prdList.thumb:'https://rqys.hleason.com/dist/images/plh.png'"></cover-image>
                </cover-view> 
            </video>  
        </div>
        <div class="info-text">
            <div class="title">{{prdList.title}}</div>
            <div class="msg-text clear-both">
                <div class="float-left">
                    <!--<span class="hits"><i class="iconfont iconfont-shipin"></i>&nbsp;24</span>-->
                    <span>{{prdList.create_time}}</span>
                </div>
                <div class="float-right">
                    <span class="operation"><i class="iconfont iconfont-shurukuangchakanmima"></i>&nbsp; {{prdList.records}}</span>&nbsp;&nbsp;&nbsp; 
                    <span class="operation" @click="shoucang(1,prdList)" v-if="!shoucangShow"><i class="iconfont iconfont-shoucang"></i>  {{prdList.collects}}</span>
                    <span class="operation" @click="shoucang(2,prdList)" v-else><i class="iconfont iconfont-shoucang shoucang"></i>{{prdList.collects}}</span>
                    <!--<span class="operation"><i class="iconfont iconfont-fenxiang1"></i>&nbsp;24</span>-->
                </div>
            </div>
        </div>
  
        <div class="group" v-if="morePrdList.length!=0">
            <r-tag title="选集"></r-tag>
            <div class="content"> 
                <scroll-view :scroll-x="true" class="scroll-view " :scroll-left="scrollLeft">
                    <div class="view-item" :class="{'view-item-active':prdList.id==item.id}" @click="lookItem(item)" v-for="(item,idexItem) in morePrdList">
                        <div class="img-box">
                            <image  class="img"  mode="aspectFit"  :src="item.thumb?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item.thumb:'https://rqys.hleason.com/dist/images/plh.png'"></image>
                        </div>
                        <div class="title text-center">{{item.title}}</div>
                    </div>
                </scroll-view> 
            </div>
        </div>

        <div class="group" v-if="recommendList.length!=0">
            <r-tag title="相关推荐"></r-tag>
            <div class="content"> 
                <div class="list-group" v-for="(item,index) in recommendList" :key="index" @click="lookItem(item)">
                    <div class="list-item-img">
                        <image  class="img"  mode="aspectFit"  :src="item.thumb?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item.thumb:'https://rqys.hleason.com/dist/images/plh.png'"  ></image>
                    </div>
                    <div class="list-item-text">
                        <div class="title">{{item.title}}</div>
                        <div class="hit">
                            <!--<div class="operation"><i class="iconfont iconfont-shipin"></i>&nbsp;24</div> -->
                            <div>{{prdList.create_time}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api  from '@/utils/api'
import rTag from './../../components/tpl/tag'
import store from './../common/store' 
export default {
    onLoad(opt){ 
        this.getVidDetail(opt.adId); 
        this.getRecommend(opt.tab_id); 
        this.morePrdList=store.state.vidPageList; 
        this.morePrdIndex=opt.itemIndex; 
    }, 
    
    components: {
        rTag
    }, 
    data () {
        return {  
            prdList:{},
            morePrdList:[], 
            morePrdIndex:0,
            recommendList:[], 
            shoucangShow:false,
            coverShow:false,
            typeId:-1,
        }
    }, 
    methods:{
        
        getVidDetail(id){
            let vm =this; 
            vm.coverShow=false;
            let body={
                model: "Resources",
                condition:{
                    id: id, 
                },
                with:{ 
                    "0":"tabs", 
                },
            };
            api.getInfoById(body).then(res=>{  
                if(res.data.code==200){  
                    vm.prdList=res.data.data;
                    vm.typeId=res.data.data.type;
                    res.data.data.is_collect==0?vm.shoucangShow=false:vm.shoucangShow=true;
                }  
            });
        },
        //相关推荐
        getRecommend(val){
            let vm =this; 
            let body={
                model: "Resources",
                condition:{
                    tab_id:val,
                    is_rec:1
                }
            };
            api.commonSite(body).then(res=>{  
                if(res.data.code==200){   
                    vm.recommendList=res.data.data.data;
                }  
            });
        },
        //选择选集
        lookItem(item){ 
            this.getVidDetail(item.id);  
            
        },
        //收藏
        shoucang(val,item){  
            let vm = this;
            let body={
                model: "Records",
                data:{
                    uid: wx.getStorageSync('u_id'),      
                    resource_id: item.id,   
                    type:1,        
                    resource_type: item.tabs.type,   
                    category:"2" 
                } 
            }; 
            if(val=='2'){
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        vm.shoucangShow=false;
                        item.collects--;
                        wx.showToast({icon:'none', title: '取消成功' })
                    }
                });
            }else{
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        vm.shoucangShow=true;
                         item.collects++;
                        wx.showToast({icon:'none', title: '收藏成功' })
                    }
                });
            }
            
        },
        bindPlay(){
            this.coverShow=true; 
        },  
    }, 
    computed: {
        scrollLeft (){
            if(this.prdList.id){
                return parseInt(this.morePrdIndex)*130;
            }else{
                return 0;
            }
        }
    },
    
}

</script>

<style scoped lang="scss">
.video-detail{
    width:100%;
    min-height:100%;
    background:#F4F4F4;
    .head-box{ 
        width:100%;
        height:430rpx;
        color:#fff;
        #myVideo{
            position:relative;
            width:100%;
            height:100%;
            .cover-box{
                position:absolute;
                top:120rpx;
                left:50%;
                margin-left:-80rpx;
                width:160rpx;
                height:160rpx; 
                .cover-box-img{
                    width:160rpx;
                    height:160rpx; 
                    border-radius:50%;
                }
                .animationSlow { 
                    background-color: orange;
                    animation-name: myfirst; /*动画的名称 */
                    animation-duration: 2000ms; /*动画从开始到结束的时间*/
                    animation-timing-function: linear; /*动画执行快慢的参数*/
                    animation-iteration-count: infinite; /*动画执行多少次的参数*//*以下是兼容ios所需，参数意义与上相同*/
                    -webkit-animation-name: myfirst;
                    -webkit-animation-duration: 2000ms;
                    -webkit-animation-timing-function: linear;
                    -webkit-animation-iteration-count: infinite;
                }
                @keyframes myfirst {
                /*开始转的角度*/
                    from {
                        transform: rotate(0deg);
                    }/*结束的角度*/
                    to {
                        transform: rotate(360deg);
                    }
                    }
                    /*兼容ios*/
                    @-webkit-keyframes myfirst {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(360deg);
                    }
                }
            }
        }
        
    }
    .info-text{
        width:100%;
        padding:20rpx 30rpx;
        background:#fff;
        box-sizing:border-box;
        margin-bottom:20rpx;
        border-top:1rpx solid #DFDFDF;
        .title{
            color:#303030;
            font-size:28rpx;
            margin-bottom:10rpx;
        }
        .msg-text{
            color:#999;
            font-size:26rpx;
            .iconfont{
               font-size:29rpx; 
            }
            .iconfont-shurukuangchakanmima{
                font-size:25rpx;
            }
            .hits{
                margin-right:20rpx;
            }
            .operation{
                margin-left:20rpx;
                .shoucang{
                    color:#FF4444 !important;
                }
            }
        }
    }
    .group{
        margin-bottom:20rpx;
        .content{ 
            .scroll-view{
                height:250rpx;
                background:#fff;
                padding:20rpx 10rpx 20rpx 30rpx;
                box-sizing:border-box;
                white-space: nowrap;
                border-bottom:1rpx solid #DFDFDF;
                .view-item{
                    display:inline-block;
                    margin-right:20rpx;
                    .img-box{
                        width:250rpx;
                        height:150rpx;
                        .img{
                            width:100%;
                            height:100%;
                            border-radius:20rpx;
                        }
                    } 
                    .title{
                        font-size:28rpx;
                        margin:10rpx 0; 
                    }
                }
                .view-item-active{
                    color:#FF4444;
                }
            }
            .list-group{
                display:flex;
                justify-content:center;
                align-items:Center;  
                padding:20rpx 30rpx; 
                box-sizing:border-box;
                background:#fff;
                border-bottom:1rpx solid #DFDFDF;
                .list-item-img{
                    flex:0 0 250rpx;
                    height:150rpx;
                    
                    .img{
                        width:100%;
                        height:100%;
                    }
                }
                .list-item-text{ 
                    flex:1;
                    padding-left:10rpx;
                    .title{
                        font-size:30rpx;
                    }
                    .hit{
                        margin-top:20rpx;
                        color:#949494;
                        font-size:26rpx;
                        .iconfont{
                            font-size:28rpx; 
                            margin-right:8rpx;
                        }
                    }
                }
            }
        }
    }
} 
</style>
